<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人注册</title>
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="/static/favicon.ico" />
    <!-- 引入我们初始化的css -->
    <link rel="stylesheet" href="/static/css/base.css">
    <!-- 引入我们自己的注册页面的css -->
    <link rel="stylesheet" href="/static/css/register.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/style.min.css">
    <link rel="stylesheet" href="/static/css/load-styles.css">
    <!-- <link rel="stylesheet" href="/static/css/style-rtl.min.css"> -->
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <script src="/static/layui/layui.js" charset="utf-8"></script>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/jquery-3.6.0.js" type="text/javascript"></script>
    <script src="/static/js/jquery.cookie.js" type="text/javascript"></script>
    <style type="text/css">
        img,
        input,
        .switch select {
            vertical-align: middle;
        }
        /* 开关按钮 */
        
        .switch {
            font-family: sans-serif;
            display: inline-block;
            position: relative;
        }
        
        .switch input[type="checkbox"] {
            position: absolute;
            left: -9999px;
        }
        
        .switch label {
            cursor: pointer;
        }
        
        .switch span {
            display: inline-block;
            position: relative;
            width: 60px;
            height: 26px;
            background: #00d084;
            border-radius: 15px;
            transition: all 0.8s;
        }
        
        .switch label span::before {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            width: 24px;
            height: 24px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s;
        }
        
        .switch label span::after {
            content: "保存";
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.8rem;
            color: white;
        }
        
        .switch input[type="checkbox"]:checked+label span::before {
            transform: translateX(34px);
        }
        
        .switch input[type="checkbox"]:checked+label span::after {
            content: "修改";
            left: 6px;
            right: auto;
        }
        
        .switch input[type="checkbox"]:checked+label span {
            background: #ff5823;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="csf-field csf-field-upload">
            <div class="csf-title">
                <h4>个人头像</h4>
            </div>
            <div class="layui-upload csf-fieldset">
                <div class="csf--preview">
                    <div class="csf-image-preview layui-upload-list"><i class="csf--remove fas fa-times"></i><span><img v-bind:src="image" class="csf--src layui-upload-img" id="locdisplay"><p id="demoText"></p></span>
                        <div style="width: 95px;">
                            <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="csf--wrap"><input type="text" id="imageurl" v-model="image"> &nbsp;
                    <button type="button" id="uploaditem" class="layui-btn layui-btn-sm layui-btn-normal">上传</button>
                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" @click="reset">删除</button>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="csf-field csf-field-text">
            <div class="csf-title">
                <h4>昵称</h4>
            </div>

            <div class="csf-fieldset"><input type="text" @input="switch1act" v-model="name">&nbsp;
                <div class="switch">
                    <input type="checkbox" @click="save1act" id="switch1" />
                    <label for="switch1">
                      <span></span>
                    </label>
                </div>
                <div class="clear"></div>
                <div class="csf-desc-text">例如：何度</div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="csf-field csf-field-text">
            <div class="csf-title">
                <h4>邮箱</h4>
            </div>
            <div class="csf-fieldset"><input type="text" @input="switch2act" v-model="email">&nbsp;
                <div class="switch">
                    <input type="checkbox" @click="save2act" id="switch2" />
                    <label for="switch2">
                      <span></span>
                    </label>
                </div>
                <div class="clear"></div>
                <div class="csf-desc-text">例如：1297416662@qq.com</div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="csf-field csf-field-text">
            <div class="csf-title">
                <h4>QQ</h4>
            </div>
            <div class="csf-fieldset"><input type="text" @input="switch3act" v-model="qq">&nbsp;
                <div class="switch">
                    <input type="checkbox" @click="save3act" id="switch3" />
                    <label for="switch3">
                      <span></span>
                    </label>
                </div>
                <div class="clear"></div>
                <div class="csf-desc-text">例如：1297416662</div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <script src="/static/js/page/userinfo.js" type="text/javascript"></script>

</body>

</html>